<template>
  <div class="body_box">
    <section>
      <img src="../../assets/img/bg.jpg" id="bg" />
      <img src="../../assets/img/moon.png" id="moon" />
      <img src="../../assets/img/mountain.png" id="mountain" />
      <img src="../../assets/img/road.png" id="road" />
      <h2 id="text">Just Do It</h2>
    </section>
    <div class="checkBox">
      <div class="head">
        <h1>Choose the words you know</h1>
        <p>
          注：请选择您能准确说出中文解释的单词，对于模糊不清楚的单词请不要选。
        </p>
      </div>

      <el-checkbox
        :indeterminate="isIndeterminate"
        v-model="checkAll"
        @change="handleCheckAllChange"
        >全选</el-checkbox
      >
      <div style="margin: 15px 0"></div>
      <el-checkbox-group
        v-model="checkedWords"
        @change="handleCheckedCitiesChange"
      >
        <div class="testGrid">
          <el-checkbox
            v-for="(item, index) in fistWordsList"
            :key="index"
            :label="item.rank"
            >{{ item.word }}</el-checkbox
          >
        </div>
      </el-checkbox-group>
      <!-- <el-button>提交</el-button> -->
    </div>
    <div class="footer">
      <a v-if="isActive" @click="submit" href="javascript:void(0);">
        <span></span>continue</a
      >
      <a v-else @click="submit2" href="javascipt:void(0);"
        ><span></span>finish</a
      >
    </div>
    <!-- <span  @click="ttt">全选 >> </span> -->
    <!-- 结果展示使用对话框 -->
  </div>
</template>

<script>
export default {
  data() {
    return {
      isIndeterminate: true,
      checkAll: false,
      fistWordsList: [],
      checkedWords: [],
      // 判断是第几次点击
      isActive: true,
      // 控制结果显示对话框的隐藏与显示

      // c:0,
      // z:0,
      // g:0,
      // rank:'0',
      excess: {},
    };
  },
  created() {
    // 获取单词数据
    // this.getFistWords();
  },
  // 实例挂载之后
  mounted() {
    // console.log(this);
    let bg = document.getElementById("bg");
    let moon = document.getElementById("moon");
    let mountain = document.getElementById("mountain");
    let road = document.getElementById("road");
    let text = document.getElementById("text");
    window.addEventListener("scroll", function () {
      let value = this.scrollY;
      bg.style.top = value * 0.5 + "px";
      moon.style.left = -value * 0.5 + "px";
      mountain.style.top = -value * 0.15 + "px";
      road.style.top = value * 0.15 + "px";
      text.style.top = value * 1 + "px";
    });
    this.getFistWords();
  },
  methods: {
    ttt() {
      console.log(123);
      this.checkedWords = this.fistWordsList;
    },

    // 获取第一轮的单词
    getFistWords() {
      this.$axios.get("getWords").then((res) => {
        // console.log(res.data)
        this.fistWordsList = res.data;
      });
    },
    // 选中单词之后
    // selectWords() {
    //   // console.log(this.checkedWords);
    //   console.log(this.checkedWords.join(","));
    //   // var qure=JSON.stringify(this.checkedWords.join(','));
    //   var qure = { data: this.checkedWords.join(",") };
    //   this.$axios.post("getSecondWords", qure).then((res) => {});
    // },
    // 提交单词
    submit() {
      // console.log(this.checkedWords.join(","));
      // var qure=JSON.stringify(this.checkedWords.join(','));
      var qure = { data: this.checkedWords.join(",") };
      // 第二轮数据请求
      this.$axios.post("getSecondWords", qure).then((res) => {
        console.log(res.data);
        this.fistWordsList = res.data.words;
        // this.rank=res.data.rank;
        // this.c=res.data.c;
        // this.z=res.data.z;
        // this.g=res.data.g;
        this.excess = res.data.excess;
      });
      this.isActive = !this.isActive;
      this.checkedWords = [];
    },
    // 第二次提交单词跳转页面到结果页面
    submit2() {
      // 打开结果对话框
      this.resultDialogVisible = true;

      console.log("1234");
      var postData = {
        //传的参数
        data: this.checkedWords.join(","),
        excess: this.excess,
      };
      postData.excess.rateList = postData.excess.rateList.toString(); //将rateList转字符串，本身是数组
      // console.log(postData);
      this.$axios
        .get("getResult", {
          params: {
            postData, //直接传参即可
          },
        })
        .then((res) => {
          // console.log(res.data);
          // 得到词汇量
          // this.result = res.data;
          this.$router.push({
            path: "/result",
            query: { info: res.data },
          });
        });

      // 跳转到result页面
    },
    // 全选按钮
    handleCheckAllChange(val) {
      // console.log(val);
      if (val) {
        this.fistWordsList.forEach((el) => {
          this.checkedWords.push(el.rank);
        });
        this.isIndeterminate = false;
      } else {
        this.checkedWords = [];
      }
    },
    handleCheckedCitiesChange(value) {
      // console.log(value);
      let checkedCount = value.length;
      this.checkAll = checkedCount === this.fistWordsList.length;
      this.isIndeterminate =
        checkedCount > 0 && checkedCount < this.fistWordsList.length;
    },
  },
};
</script>

<style scoped>
* {
  margin: 0;
  padding: 0;
}
body {
  background-color: #dcdedd;
}
.body_box {
  position: relative;
  margin: 0;
  padding: 0;
  min-height: 1500px;
  background-color: #0a2a43;
  text-align: center;
}
section {
  position: relative;
  width: 100%;
  height: 100vh;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
}

section::before {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 100px;
  background: linear-gradient(to top, #0a2a43, transparent);
  z-index: 1000;
}

section::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: #0a2a43;
  /* 相当于加了一层滤镜 */
  mix-blend-mode: color;
  z-index: 1000;
}

section img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
}
.head{
  position: relative;
  left: 5%;
  /* transform: translateX(-50%); */
  width: 800px;
  /* margin: 0 auto; */
  text-align: center;
  /* background-color: #333; */
}

.head h1{
  margin: 10px 0;
  padding: 0;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 45px;
  font-weight: bord;
}
.head p{
  margin: 10px 0 20px 0;
  padding: 0;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 12px;
  letter-spacing: 2px;
}

#text {
  position: relative;
  font-size: 10.5em;
  color: #fff;
  font-weight: bolder;
  z-index: 1;
}

#road {
  z-index: 2;
}

/* 复选框的组件样式 */
.checkBox {
  position: relative;
  left: 5%;
  /* transform: translateX(-50%); */
  text-align: center;
  color: #fff;
  width: 80%;
  margin: 0 auto;
}

/* 设置网格 */
.testGrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, 100px);
  grid-row-gap: 20px;
  grid-column-gap: 150px;
  text-align: left;

  /* grid-template-columns: 100px 100px 100px;
  grid-template-rows: 25px 25px 25px; */
  /* grid-auto-flow: row; */
}

.footer {
  width: 100%;
  height: 100px;
  text-align: center;
  margin-top: 50px;
  /* color: #fff; */
  font-size: 1.5em;
}

/* 按钮的样式  框架悬停效果*/
a {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 180px;
  height: 70px;
  text-align: center;
  text-decoration: none;
  line-height: 70px;
  background-color: #272800;
  color: #ecef00;
  font-size: 25px;
  text-transform: uppercase;
  letter-spacing: 2px;
}

a::before,
a::after,
span::before,
span::after {
  content: "";
  position: absolute;
  width: 20px;
  height: 20px;
  background-color: #ecef00;
  transition: 1s;
  mix-blend-mode: hue;
}
a::before {
  top: -3px;
  left: -3px;
}
a::after {
  bottom: -3px;
  left: -3px;
}
span::before {
  top: -3px;
  right: -3px;
}
span::after {
  bottom: -3px;
  right: -3px;
}

a:hover::before,
a:hover::after,
a:hover span::before,
a:hover span::after {
  width: calc(180px / 2);
  height: calc(70px / 2);
}
</style>